<template>
  <div class="hot" ref="hot">
    <div>
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item, index) in slideList" :key="index">
          <img :src="item.imgurl" width="100%">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="navs" ref="navsWrapper">
        <ul class="nav-list" ref="navList">
          <li class="nav-icon" v-for="(item, index) in navList" :key="index">
            <img :src="item.iconurl" class="icon-img" width="50%" >
            <span class="icon-title">{{item.icontitle}}</span>
          </li>
        </ul>
      </div>
      <hotGoodsLIst></hotGoodsLIst>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import axios from 'axios'
  import BScroll from 'better-scroll'
  import hotGoodsLIst from './goodsLIst'
  export default {
    name: 'homeHot',
    mounted () {
      axios.get('/static/mock/homeCasual.json')
        .then(res => {
          console.log(res.data.message.data)
          this.slideList = res.data.message.data
      })
      axios.get('/static/mock/homeNav.json')
        .then(res => {
          console.log(res.data.message.data)
          this.navList = res.data.message.data
          this._initNavWidth()
          this.$nextTick(()=> {
            this._initNavScroll()
            this._initHotScroll()
          })
        })
    },
    data () {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          autoplay: true
        },
        slideList: [],
        navList: []
      }
    },
    methods: {
      _initNavWidth () {
        this.$refs.navList.style.width = this.navList.length /  2 * 73 + 'px'
      },
      _initNavScroll () {
        this.navScroll = new BScroll(this.$refs.navsWrapper, {
          scrollY: false,
          scrollX: true
        })
      },
      _initHotScroll () {
        this.hotScroll = new BScroll(this.$refs.hot)
      }
    },
    components: {
      swiper,
      swiperSlide,
      hotGoodsLIst
    }
  }
</script>

<style scoped lang="stylus">
  .hot >>> .swiper-container
    width: 100%
    .swiper-pagination-bullet-active
      background: #fff
  .hot
    position absolute
    left 0
    right 0
    top 43px
    bottom 0
    background: #f5f5f5
    z-index -1
    .navs
      background: #fff
      width 100%
      overflow hidden
      padding 10px 0

      .nav-list
        display flex
        flex-wrap wrap
        .nav-icon
          width: 73px
          display flex
          flex-direction column
          justify-content center
          align-items center
          margin-top: 5px
          // .icon-img
          //   width: 100%
          span
            margin-top: 2px
            font-size 12px
            color #333
</style>
